Fixing bug edit district and subdistrict, doesnt show old value

1 files changed, 20 insertions, 7 deletions

diff --git a/src/pages/my/address/[id]/edit.js b/src/pages/my/address/[id]/edit.js
index 78eef635..13f166ab 100644
--- a/src/pages/my/address/[id]/edit.js
+++ b/src/pages/my/address/[id]/edit.js
@@ -38,13 +38,15 @@ export async function getServerSideProps( context ) {
     street: address.street,
     zip: address.zip,
     city: address.city?.id,
-    district: address.district?.id || '',
-    subDistrict: address.sub_district?.id || ''
+    oldDistrict: address.district?.id || '',
+    district: '',
+    oldSubDistrict: address.sub_district?.id || '',
+    subDistrict: '',
   };
   return { props: { id, defaultValues } };
 }
 
-export default function CreateAddress({ id, defaultValues }) {
+export default function EditAddress({ id, defaultValues }) {
   const router = useRouter();
   const { 
     register, 
@@ -52,6 +54,7 @@ export default function CreateAddress({ id, defaultValues }) {
     handleSubmit,
     watch,
     setValue,
+    getValues,
     control,
   } = useForm({ 
     resolver: yupResolver(validationSchema),
@@ -79,23 +82,33 @@ export default function CreateAddress({ id, defaultValues }) {
         let dataDistricts = await apiOdoo('GET', `/api/v1/district?city_id=${watchCity}`);
         dataDistricts = dataDistricts.map((district) => ({ value: district.id, label: district.name }));
         setDistricts(dataDistricts);
+        let oldDistrict = getValues('oldDistrict');
+        if (oldDistrict) {
+          setValue('district', oldDistrict);
+          setValue('oldDistrict', '');
+        }
       };
       loadDistricts();
     }
-  }, [ watchCity, setValue ]);
+  }, [ watchCity, setValue, getValues ]);
   
   const watchDistrict = watch('district');
-   useEffect(() => {
+  useEffect(() => {
     setValue('subDistrict', '');
     if (watchDistrict) {
       const loadSubDistricts = async () => {
         let dataSubDistricts = await apiOdoo('GET', `/api/v1/sub_district?district_id=${watchDistrict}`);
         dataSubDistricts = dataSubDistricts.map((district) => ({ value: district.id, label: district.name }));
         setSubDistricts(dataSubDistricts);
+        let oldSubDistrict = getValues('oldSubDistrict');
+        if (oldSubDistrict) {
+          setValue('subDistrict', oldSubDistrict);
+          setValue('oldSubDistrict', '');
+        }
       };
       loadSubDistricts();
     }
-   }, [ watchDistrict, setValue ])
+   }, [ watchDistrict, setValue, getValues ])
 
    const onSubmitHandler = async (values) => {
     const parameters = {
@@ -123,7 +136,7 @@ export default function CreateAddress({ id, defaultValues }) {
             <Controller
               name="type"
               control={control}
-              render={props => <Select {...props} options={types} />}
+              render={props => <Select {...props} isSearchable={false} options={types} />}
             />
             <div className="text-caption-2 text-red_r-11 mt-1">{ errors.type?.message }</div>
           </div>